<template>
    <div class="container">
        <div class="header flex align-items space-between">
            <i class="iconfont iconjiantouzuo" @click="back"></i>
            <div class="flex1"> <Search v-model="searchVal" placeholder="请输入搜索关键词" @search='sendSearch(true)' show-action></Search></div>
        </div>
        <div class="main">
        <div class="list">
            <List v-if='list.length > 0' v-model="loading" :finished="finished" finished-text="没有更多了" @load="sendSearch(false)">
                 <div v-for='(item,idx) in list' :key='idx'><ExpressCard  :info='item'></ExpressCard></div>
            </List>
        </div>
        </div>
        <Empty v-show='noData' image='search' description="暂无搜索结果" />
    </div>
</template>

<script>
    import { Search , List , Empty } from 'vant';
    import ExpressCard from '@/components/express/expressCard'
    import { getOrderList } from '@/model/api';
    export default {
        components:{Search,ExpressCard,List,Empty},
        data(){
            return {
                searchVal:"",
                loading:false,
                list:[],
                total:0,
                noData:false,
            }
        },
        methods:{
            async sendSearch(refresh = false){
                let { code , data , count } = await getOrderList({
                    start:refresh ? 0 : this.list.length,
                    type:1,
                    keyword:this.searchVal,
                    status:0,
                })
                this.loading = false;
                if(code == 1){
                    this.list = refresh ? data : this.list.concat(data);
                    this.total = count;
                }else{
                    this.list  = refresh ? [] : this.list;
                }
                this.noData = this.list.length == 0;
            }
        },
        created(){
            let { searchVal = "" ,} = this.$route.query;
            this.searchVal = searchVal;
            if(this.searchVal != ""){
                this.sendSearch(true);
            }
        },
        computed:{
            finished(){
                return this.list.length == this.total && this.total > 0;
            }
        }
    }
</script>

<style lang="less" scoped>
   .header{
       background-color: #fff;
       .iconfont{
           margin-left: 10px;
       }
   }
   .list{
       width: 100%;
       padding: 10px 14px 0;
   }
</style>